<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li class="active">
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <div class="cart-box">
                        <el-form :model="order" :rules="rules" ref="orderForm" label-width="150px" class="demo-ruleForm">
                            <h2 class="slide-tit">
                                <span>1、收货地址</span>
                            </h2>
                            <div class="form-box address-info">
                                <dl class="form-group">
                                    <el-form-item label="收货人姓名：" prop="accept_name">
                                        <el-input style="width:500px;" v-model="order.accept_name"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="所属地区：" prop="area">
                                        <v-distpicker :province="this.order.area.province.value" :city="this.order.area.city.value" :area="this.order.area.area.value"
                                            @selected="selectedArea"></v-distpicker>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="详细地址：" prop="address">
                                        <el-input style="width:500px;" v-model="order.address"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="手机号码：" prop="mobile">
                                        <el-input style="width:500px;" v-model="order.mobile"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="电子邮箱：">
                                        <el-input style="width:500px;" v-model="order.email"></el-input>
                                    </el-form-item>
                                </dl>
                                <dl class="form-group">
                                    <el-form-item label="邮政编码：">
                                        <el-input style="width:200px;" v-model="order.post_code"></el-input>
                                    </el-form-item>
                                </dl>
                            </div>
                            <h2 class="slide-tit">
                                <span>2、支付方式</span>
                            </h2>
                            <ul class="item-box clearfix">
                                <!--取得一个DataTable-->
                                <li>
                                    <label>
                                        <el-radio v-model="order.payment_id" label="6">在线支付</el-radio>
                                        <em>手续费：0.00元</em>
                                    </label>
                                </li>
                            </ul>
                            <h2 class="slide-tit">
                                <span>3、配送方式</span>
                            </h2>
                            <el-radio-group @change="expressChange" v-model="order.express_id">
                                <ul class="item-box clearfix">
                                    <li>
                                        <label>
                                            <el-radio label="1">顺丰快递(20元)</el-radio>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <el-radio label="2">圆通快递(10元)</el-radio>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <el-radio label="3">韵达快递(8元)</el-radio>
                                        </label>
                                    </li>
                                </ul>
                            </el-radio-group>
                            <h2 class="slide-tit">
                                <span>4、商品清单</span>
                            </h2>
                            <div class="line15"></div>
                            <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
                                <tbody>
                                    <tr>
                                        <th colspan="2" align="left">商品信息</th>
                                        <th width="84" align="left">单价</th>
                                        <th width="84" align="center">购买数量</th>
                                        <th width="104" align="left">金额(元)</th>
                                    </tr>
                                    <tr v-for="item in goodsList" :key="item.id">
                                        <td width="68">
                                            <a target="_blank" href="/goods/show-89.html">
                                                <img :src="item.img_url" class="img">
                                            </a>
                                        </td>
                                        <td>
                                            <a target="_blank" href="/goods/show-89.html">{{item.title}}</a>
                                        </td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price}}
                                            </span>
                                        </td>
                                        <td align="center">{{item.buycount}}</td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price * item.buycount}}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="line15"></div>
                            <h2 class="slide-tit">
                                <span>5、结算信息</span>
                            </h2>
                            <div class="buy-foot clearfix">
                                <div class="left-box">
                                    <dl>
                                        <dt>订单备注(100字符以内)</dt>
                                        <dd>
                                            <textarea name="message" v-model="order.message" class="input" style="height:35px;"></textarea>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <p>
                                        商品
                                        <label class="price">{{getTotalCount}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 商品金额：￥
                                        <label id="goodsAmount" class="price">{{getGoodsAmount}}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
                                    </p>
                                    <p>
                                        运费：￥
                                        <label id="expressFee" class="price">{{order.expressMoment}}</label> 元
                                    </p>
                                    <p class="txt-box">
                                        应付总金额：￥
                                        <label id="totalAmount" class="price">{{getTotalPrice}}</label>
                                    </p>
                                    <p class="btn-box">
                                        <el-button size="medium" type="primary">返回购物车</el-button>
                                        <el-button @click="goToOrder()" size="medium" type="success">确认提交</el-button>
                                    </p>
                                </div>
                            </div>
                            </form>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>

<script>

    import { getGoodsObj } from '../../common/localStorageHelper.js'

    import VDistpicker from 'v-distpicker'

    export default {
        data() {
            //检测手机号码的自定义规则
            var checkMobile = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号码不能为空'));
                }
                
                if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(value))){ 
                    callback(new Error('手机号码非法'));
                }else{
                    callback()
                } 
            };

            return {
                order: {
                    accept_name: '李四', //收获人姓名
                    area: {
                        province: { code: "440000", value: "广东省" },
                        city: { code: "440300", value: "深圳市" },
                        area: { code: "440306", value: "宝安区" }
                    }, //省市区
                    address: '中粮商务公园',//地址
                    mobile: '13811112222',//手机
                    email: 'abc@163.com',//邮箱
                    post_code: '100001',//邮编
                    payment_id: '6',//支付方式，目前只支持在线支付
                    express_id: '1',//快递方式，默认顺丰快递
                    message: "请尽快发货",//留言信息
                    expressMoment: 20,//快递费用，默认20
                    goodsAmount: 0,//商品费用
                    goodsids: null,//商品的ids
                    cargoodsobj: null//购物车中的商品对象
                },
                rules: {
                    accept_name: [
                        { required: true, message: '请输入收货人姓名', trigger: 'blur' }
                    ],
                    area: [
                        { required: true, message: '请输入所在区域', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入收货人地址', trigger: 'blur' }
                    ],
                    mobile: [
                        // { required: true, message: '请输入手机号码', trigger: 'blur' }
                        { validator: checkMobile, trigger: 'blur' }
                    ]
                },
                goodsList: []
            }
        },
        computed: {
            getTotalCount() {
                let totalCount = 0
                this.goodsList.forEach(item => {
                    totalCount += item.buycount
                })

                return totalCount
            },
            getGoodsAmount() {
                let goodsAmount = 0
                this.goodsList.forEach(item => {
                    goodsAmount += item.buycount * item.sell_price
                })

                //赋值给订单的goodsAmount 属性
                this.order.goodsAmount = goodsAmount

                return goodsAmount
            },
            getTotalPrice() {//商品的总价格+快递费用
                return this.order.goodsAmount + this.order.expressMoment
            }
        },
        created() {
            this.getGoodsListData()
        },
        components: {
            VDistpicker
        },
        methods: {
            //下单操作
            goToOrder() {
                this.$refs.orderForm.validate((valid) => {
                    if (valid) {
                        //发送下单请求
                        const url = `site/validate/order/setorder`

                        this.$axios.post(url, this.order).then(response => {
                            if (response.data.status == 1) {
                                this.$message.error(response.data.message)
                                return
                            }

                            //跳转到支付订单组件中去
                            this.$router.push({ path: `/site/payOrder/${response.data.message.orderid}` })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //获取商品列表
            getGoodsListData() {
                const url = `site/validate/order/getgoodslist/${this.$route.params.ids}`

                this.$axios.get(url).then(response => {
                    //获取localStorage中的数据
                    const goodsObj = getGoodsObj()

                    this.order.cargoodsobj = {}
                    response.data.message.forEach(item => {
                        item.buycount = goodsObj[item.id]

                        //给购物车对象赋值
                        this.order.cargoodsobj[item.id] = item.buycount
                    })

                    //给order赋上相关的值
                    this.order.goodsids = this.$route.params.ids


                    this.goodsList = response.data.message
                })
            },
            //单选按钮的change事件
            expressChange(label) {
                this.order.express_id = label

                switch (label) {
                    case "1":
                        this.order.expressMoment = 20
                        break;

                    case "2":
                        this.order.expressMoment = 10
                        break;

                    case "3":
                        this.order.expressMoment = 8
                        break;

                    default:
                        break;
                }
            },
            //选择了省市区
            selectedArea(value) {
                this.order.area = value
            }
        }
    }
</script>